<template>
    <div class="out_box">
        <headers id="headers" />

        <div class="content_box">
            <iframe scrolling="auto" frameborder="0"  src="" id="iframe"></iframe>  
            <div class="save_box">
                <v-button class="btn btn1" type="primary" size="large" @click="$router.push('/main')">立即支付</v-button>
                <v-button class="btn btn2" size="large" @click="$router.back(-1)">我再想想</v-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';

    export default {
        name: "Payment",
        components: {
            Headers,
        },
        data: function() {
            return {
            }
        },
        methods: {
        },
        mounted: function() {
            const query = this.$route.query;
            $('#iframe').css({
                'width': '100%',
                'height': $('body').height() - $('#headers').height() - 90
            }).attr('src', query.src);
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';
    
    .out_box{
        background-color: white;
    }
    .content_box{
        .save_box{
            height: 80px;
            line-height: 80px;
            text-align: center;
            .btn{
                height: 36px;
                text-align: center;
                border-radius: 34px;
                box-sizing: border-box;
            }
            .btn1{
                width: 180px;
                background: linear-gradient(139deg, #56ccf2 0%, #2948ff 100%);
            }
            .btn2{
                width: 130px;
                margin-left: 40px;
                .gray_ellipsis_btn;
            }
        }
    }
</style>
